<template>
	<div class="map-con">
		<span v-show="mapbut" @click="back">返回上一级</span>
		<!-- <div style="width: 100%;height: 100%;" ref="myChart"></div> -->
		<div class="img-container" :class="{ center: showIndex !== '' }">
			<div class="img-item" :class="{
          hover: hoverIndex === 1,
          show: showIndex === '' || showIndex === 1,
          showhedong: showIndex === 1,
          hedong: showIndex === '',
        }"><img src="@/assets/images/home/hedongqu.png" alt="" />
				<img class="mark" src="@/assets/images/home/area01_icon.png" alt="" @mouseover="mouseover(1)"
					@mouseout="mouseup(1)" @click="imgClick({
            index: 1,
            nodeId: 9353,
            point: [118.41055, 35.08803],
          })" />
				<div class="mask"></div>
			</div>
			<div class="img-item" :class="{
          hover: hoverIndex === 2,
          show: showIndex === '' || showIndex === 2,
          showlanshan: showIndex === 2,
          lanshan: showIndex === '',
        }"><img src="@/assets/images/home/lanshanqu.png" alt="" />
				<img class="mark" src="@/assets/images/home/area02_icon.png" alt="" @mouseover="mouseover(2)"
					@mouseout="mouseup(2)" @click="imgClick({
            index: 2,
            nodeId: 9317,
            point: [118.34817, 35.06872],
          })" />
				<div class="mask"></div>
			</div>
			<div class="img-item" :class="{
          hover: hoverIndex === 3,
          show: showIndex === '' || showIndex === 3,
          showluozhuang: showIndex === 3,
          luozhuang: showIndex === '',
        }"><img src="@/assets/images/home/luozhuangqu.png" alt="" />
				<img class="mark" src="@/assets/images/home/area03_icon.png" alt="" @mouseover="mouseover(3)"
					@mouseout="mouseup(3)" @click="imgClick({
            index: 3,
            nodeId: 9318,
            point: [118.284786, 34.996741],
          })" />
				<div class="mask"></div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		defineComponent,
		inject,
		reactive,
		toRefs,
		onMounted,
		nextTick,
		computed
	} from 'vue';
	import 'echarts-gl';
	import axios from 'axios';
	import {
		useRouter
	} from 'vue-router';
	import {
		useMapStore
	} from '@/store/modules/map';
	import zhashe from '@/assets/images/home/zhashe.png';

	export default defineComponent({
		emits: ['handle-maps'],
		setup(props, {
			emit
		}) {
			const echarts = inject('echarts');
			const router = useRouter();
			const mapStore = useMapStore();

			const state = reactive({
				dataIndex: -1,
				map: computed(() => mapStore.ownMap),
				leve: 1,
				myChart: null,
				initMyChart: null,
				option: null,
				cityName: '',
				mapList: [],
				// 是否显示地图返回按钮
				mapbut: false,
				hoverIndex: '',
				showIndex: '',
				city: [{
						name: '兰山区',
						value: 0,
						height: 3,
						point: [118.34817, 35.06872],
						adcode: 371302,
						nodeId: 9317,
						itemStyle: {
							color: '#3A84EC',
							// opacity: 0.7,
						},
						label: {
							opacity: 1,
							height: 60,
							name: '',
							backgroundColor: {
								// image: require('@/assets/images/home/area02_icon.gif'),
							},
						},
					},
					{
						name: '罗庄区',
						value: 0,
						adcode: 371311,
						height: 3,
						nodeId: 9318,
						point: [118.284786, 34.996741],
						itemStyle: {
							color: '#3A84EC',
							// opacity: 0.7,
						},
						label: {
							opacity: 1,
							height: 60,
							backgroundColor: {
								// image: require('@/assets/images/home/area03_icon.gif'),
							},
						},
					},
					{
						name: '河东区',
						value: 0,
						adcode: 371312,
						height: 3,
						point: [118.41055, 35.08803],
						nodeId: 9353,
						itemStyle: {
							color: '#3A84EC',
							// opacity: 0.7,
						},
						label: {
							height: 60,
							opacity: 1,
							backgroundColor: {
								// image: require('@/assets/images/home/area01_icon.gif'),
							},
						},
					},
				],
				viewControl: 230,
			});
			const getJson = async (jsonName) => {
				return await axios.get('./static/mapJson/' + jsonName);
			};
			const getList = () => {
				let sandongJson = getJson('371300_full.json');
				sandongJson.then((res) => {
					const list = res.data;
					const spliceArr = list.features.slice(0, 3);
					state.mapList = spliceArr;
					// this.featuresList = res.data.features;
					state.cityName = 'sandong';
					initMap({
							type: 'FeatureCollection',
							features: spliceArr,
						},
						state.city,
					);
				});
			};
			const setOptions = (data) => {
				let option = {
					backgroundColor: 'transparent',
					visualMap: {
						show: false,
					},
					series: {
						type: 'map3D', // 系列类型
						name: '临沂', // 系列名称
						map: state.cityName,
						selectedMode: true,
						label: {
							// 标签的相关设置
							show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
							color: 'transparent', // 地图初始化区域字体颜色
							fontSize: 14, // 字体大小
							opacity: 1, // 字体透明度
							backgroundColor: 'transparent', // 字体背景色
							padding: [10, 20, 10, 20],
						},
						itemStyle: {
							// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
							// color: '#01183E', // 地图板块的颜色
							borderWidth: 3, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域
							borderColor: '#56C8F9', // 图形描边的颜色
						},
						emphasis: {
							//当鼠标放上去  地区区域是否显示名称
							itemStyle: {
								color: '#1688F4', // 鼠标移入地图配色
								areaColor: '#1688F4',
							},
						},
						light: {
							//光照阴影
							main: {
								color: '#ccc', //光照颜色
								intensity: 1, //光照强度
								shadow: false, //是否显示阴影
								alpha: 60,
								beta: 180,
							},
							ambient: {
								intensity: 0.2,
							},
						},
						viewControl: {
							distance: state.viewControl, // 根据视觉距离远近调整显示地图大小
							alpha: 50,
							beta: 10,
						},
						boxDepth: 120, // 地图倾斜度
						top: '-18%',
						bottom: 10,
						data: data,
					},
				};
				return option;
			};
			const initMap = (jeoJson, data) => {
				echarts.registerMap(state.cityName, jeoJson);
				if (
					//判断是否存在echarts实例化对象,如果存在则销毁
					state.initMyChart != null &&
					state.initMyChart != '' &&
					state.initMyChart != undefined
				) {
					state.initMyChart.dispose();
				}
				let myChart = '';
				if (state?.myChart) {
					myChart = echarts.getInstanceByDom(state?.myChart);
				}
				if (!myChart && state.myChart) {
					state.initMyChart = echarts.init(state.myChart);

				}
				state.option = setOptions(data);
				state.initMyChart?.setOption(state.option, true);
				state.initMyChart?.off('click');
				state.initMyChart?.off('mouseover');
				if (state.leve == 1) {
					mouseoverCity();
				}
				clickMap();
				window.addEventListener('resize', () => {
					state.initMyChart?.resize();
				});
			};
			const back = () => {
				state.mapbut = false;
				state.leve = 1;
				state.viewControl = 190;
				state.showIndex = '';
				// state.initMyChart.clear();
				emit('handle-maps', '9317');
				state.cityName = 'sandong';
				// initMap(
				//   {
				//     type: 'FeatureCollection',
				//     features: state.mapList,
				//   },
				//   state.city,
				// );
				// echarts.registerMap(state.cityName, {
				//   type: "FeatureCollection",
				//   features: state.mapList,
				// })
				// state.option = setOptions(state.city)
				// state.option && state.initMyChart.setOption(state.option, true);
				// mouseoverCity()
			};
			const mouseoverCity = () => {
				state.initMyChart?.on('mousemove', (e) => {
					if (state.dataIndex == e.dataIndex) return;
					state.dataIndex = e.dataIndex;
					const arr = state.option.series.data;
					arr.map((i) => {
						if (e.name == i.name) {
							i.height = 8;
						} else {
							i.height = 3;
						}
					});
					state.initMyChart.setOption(state.option, true);
				});
			};
			const clickMap = () => {
				state.initMyChart?.on('click', function(params) {
					const {
						data: {
							adcode,
							name,
							nodeId
						},
					} = params;
					state.mapbut = true;
					// 调用接口 刷新页面数据
					if (nodeId) {
						emit('handle-maps', nodeId);
					}
					// 地图下钻
					if (state.leve == 1) {
						let jsonData = getJson(`${adcode}.json`);
						jsonData.then((res) => {
							state.initMyChart.clear();
							let item = state.city.find((item) => item.adcode == adcode);
							item.height = 3;
							state.cityName = name;
							state.viewControl = 230;
							initMap(res.data, [item]);
						});
						state.leve = 2;
					} else {
						// 第二级 跳转到 路网界面 并放大地图
						const {
							data: {
								point
							},
						} = params;
						router.push({
							path: '/basic/index',
						});
						const points = new window.BMap.Point(point[0], point[1]);
						state.map.centerAndZoom(points, 18);
					}
				});
			};
			// 鼠标移入
			const mouseover = (index) => {
				state.hoverIndex = index;
			};
			// 鼠标移出
			const mouseup = (index) => {
				state.hoverIndex = '';
			};
			const imgClick = (data) => {
				const {
					index,
					nodeId,
					point
				} = data
				state.showIndex = index
				// emit('handle-maps', nodeId)
				state.mapbut = true;
				if (state.leve == 1) {
					state.leve = 2;
				} else {
					// 第二级 跳转到 路网界面 并放大地图
					router.push({
						path: '/basic/index',
					});
					const points = new window.BMap.Point(point[0], point[1]);
					state.map.centerAndZoom(points, 18);
				}
			};
			onMounted(() => {
				nextTick(() => {
					getList();
				});
			});
			return {
				...toRefs(state),
				back,
				mouseover,
				mouseup,
				imgClick,
			};
		},
	});
</script>
<style scoped lang="less">
	.map-con {
		position: relative;
		display: flex;
		justify-content: center;
		// align-items: center;
		height: 59.1vh;

		span {
			position: absolute;
			left: 5%;
			top: 5%;
			z-index: 9999;
			font-size: 0.8vw;
			font-weight: 600;
			cursor: pointer;
		}

		.img-container {
			position: relative;
			width: 300px;
			height: 300px;
			transform: scale(0.84);
			margin-top: 2%;
			margin-left: 3vw;

			@media screen and (max-width: 1200px) {
				transform: scale(0.76);
			}

			@media screen and (max-width: 1560px) {
				transform: scale(0.5);
			}

			@media screen and (max-height: 900px) {
				transform: scale(0.5);
			}

			.img-item {
				position: absolute;
				transition: all 0.5s;
				display: none;

				.mark {
					position: absolute;
					z-index: 2;
					transform: scale(0.8);
					cursor: pointer;
				}

				// .mask {
				//   position: absolute;
				//   z-index: 3;
				//   width: 100px;
				//   height: 100px;
				//   background-color: red;
				//   top: 0;
				//   left: 0;
				// }
			}

			.img-item.hover {
				z-index: 3;
				transform: scale(1.1);
			}

			.img-item.lanshan {
				top: -4px;
				left: -120px;

				.mark {
					top: 33px;
					left: 120px;
				}
			}

			.img-item.luozhuang {
				left: -204px;
				bottom: -314px;

				.mark {
					top: 38px;
					left: 132px;
				}
			}

			.img-item.hedong {
				right: -120px;

				.mark {
					top: 123px;
					left: 57px;
				}
			}

			.img-item.show {
				display: block;
			}

			.img-item.show.showhedong {
				top: 20px;
				transform: scale(1.1);

				.mark {
					top: 123px;
					left: 57px;
				}
			}

			.img-item.show.showlanshan {
				top: 186px;
				transform: scale(1.5);

				.mark {
					top: 5px;
					left: 94px;
				}
			}

			.img-item.show.showluozhuang {
				transform: scale(1.3);
				top: 134px;

				.mark {
					top: 12px;
					left: 107px;
				}
			}
		}

		.img-container.center {
			align-items: center;
			display: flex;
		}
	}
</style>